<template>
  <div class="personal-info">
    <!-- 1F导航条 -->
    <!-- 
     右边点击消息按钮可以跳转到审核进度界面
    -->
    <van-nav-bar
      title="个人信息"
      left-text="设置"
      left-arrow
      @click-left="handleSettingsClick"
      right-text="消息"
      @click-right="handleMessageClick"
    />
    <!-- 2F用户修改头像上传 -->
    <!-- <van-uploader class="uploadHeadpic" :after-read="afterRead" /> -->

    <!-- 2F显示用户头像 -->
    <van-image
      round
      class="avatar"
      :src="form.avatar ? form.avatar : 'https://img01.yzcdn.cn/vant/cat.jpeg'"
    />
    <!-- 增加登录跳转按钮 -->
    <van-button
      class="qiehuan"
      v-if="user"
      round
      @click="$router.push('/login')"
      >切换账号</van-button
    >
    <button v-else class="myuserBtn" @click="$router.push('/about')">
      点击登录
    </button>
    <!-- 3F用户信息列表  -->
    <!-- 登录状态时 -->
    <van-cell-group v-if="user">
      <van-cell title="用户名" :value="user.username" />
      <van-cell title="昵称" :value="user.nickname" />
      <van-cell title="邮箱" :value="user.email" />
      <van-cell title="电话号码" :value="user.phone" />
    </van-cell-group>
    <!-- 未登录状态时 -->
    <van-cell-group v-else>
      <van-cell title="用户名" value="未登录，暂无用户名" />
      <van-cell title="昵称" value="未登录，暂无昵称" />
      <van-cell title="邮箱" value="未登录，暂无邮箱" />
      <van-cell title="电话号码" value="未登录，暂无电话号码" />
    </van-cell-group>

    <!-- 4F用户收藏模块 -->
    <van-tabs v-model="active">
      <!-- 电影标签 -->
      <van-tab title="收藏电影">
        <van-grid clickable v-for="item in pageItem('movie')">
          <van-grid-item
            :to="`/xiangqing_sc/${item.id}`"
            v-if="item.type === 'movie'"
            class="collMov"
          >
            <img v-lazy="item.imgs" alt="" />
            <div class="collMovDetail">
              <h3>影片名字：{{ item.name }}</h3>
              <span>点赞数量:{{ item.dz_count }}</span>
            </div>
          </van-grid-item>
        </van-grid>
        <!-- 分页 -->
        <van-pagination
          v-if="moviedata.length > 0"
          v-model="currentPage"
          :total-items="moviedata.length"
          :items-per-page="5"
        />
        <!-- 
          hasmovie设定默认值true
          !hasMovie 等价于 hasMovie = false -->
        <template v-if="showNoMovie && !hasMovie">
          <!-- 在 showNoMovie 为 true 且 hasMovie 为 false 的情况下才展示“暂无收藏电影”这个条件 -->
          <van-empty description="暂无收藏电影" />
        </template>
        <template v-else-if="showNoLogin && !hasMovie">
          <!-- 在 showNoLogin 为 true 且 hasMovie 为 false 的情况下才展示“请先登录”这个条件 -->
          <van-empty description="请先登录" />
        </template>
      </van-tab>

      <!-- 动漫标签 -->
      <van-tab title="收藏动漫">
        <van-grid v-for="item in pageItem('dongman')">
          <van-grid-item v-if="item.type === 'dongman'" class="collMov">
            <img v-lazy="item.imgs" alt="" />
            <div class="collMovDetail">
              <h3>动漫名字：{{ item.name }}</h3>
              <span>点赞数量:{{ item.dz_count }}</span>
            </div>
          </van-grid-item>
        </van-grid>
        <!-- 分页 -->
        <van-pagination
          v-if="dongmandata.length > 0"
          v-model="currentPage1"
          :total-items="dongmandata.length"
          :items-per-page="5"
        />

        <template v-if="showNoDongman && !hasDongman">
          <van-empty description="暂无收藏动漫" />
        </template>
        <template v-else-if="showNoLogin && !hasDongman">
          <van-empty description="请先登录" />
        </template>
      </van-tab>

      <!-- 电视剧标签 -->
      <van-tab title="收藏电视剧">
        <van-grid v-for="item in pageItem('dianshi')">
          <van-grid-item v-if="item.type === 'dianshi'" class="collMov">
            <img v-lazy="item.imgs" alt="" />
            <div class="collMovDetail">
              <h3>电视剧名字：{{ item.name }}</h3>
              <span>点赞数量:{{ item.dz_count }}</span>
            </div>
          </van-grid-item>
        </van-grid>
        <!-- 分页 -->
        <van-pagination
          v-if="dianshidata.length > 0"
          v-model="currentPage2"
          :total-items="dianshidata.length"
          :items-per-page="5"
        />

        <template v-if="showNodianshi && !hasdianshi">
          <van-empty style="60vh" description="暂无收藏电视剧" />
        </template>
        <template v-else-if="showNoLogin && !hasdianshi">
          <van-empty description="请先登录" />
        </template>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 引入mapState
import httpApi from "@/http";
import { mapState } from "vuex";

export default {
  name: "PersonalInfo",
  data() {
    return {
      form: {},
      filePic: [], //用户头像链接
      active: 2,
      usercollects: [], //收藏内容
      hasMovie: false, //其中是否包含电影类型
      showNoMovie: true, //暂无电影收藏
      showNoLogin: true, //请先登录
      hasDongman: false,
      showNoDongman: true,
      hasdianshi: false,
      showNodianshi: true,
      moviedata: [],
      dongmandata: [],
      dianshidata: [],
      currentPage: 1,
      currentPage1: 1,
      currentPage2: 1,
      showButton: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
    //从vuex中拿到用户信息 存入form中
    // 此处方法是原始办法, computed是简便方法
    this.form = this.$store.state.user;
    console.log("6666", this.form);
    if (this.form == null) {
      return;
    } else {
      //发送当前用户收藏内容请求
      let user = this.user.username;

      //page查询页数 pagesize设置的每页页数
      let params = { user, page: 1, pagesize: 80 };
      httpApi.userApi.search_collects(params).then((res) => {
        // 请求到的收藏数据
        console.log(res);
        this.usercollects = res.data.data;
        // 开始放到数组中
        // console.log(this.moviedata);
        this.pushdata_movie();
        this.pushdata_dongman();
        this.pushdata_dianshi();
        console.log(this.moviedata, this.dongmandata, this.dianshidata);
      });
    }
  },
  beforeDestroy() {
    // 在组件销毁时移除监听
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    //电影 如果请求到的数据长度大于0
    this.updateShowNoMovie();
    //动漫
    this.updateshowNoDongman();
    //电视剧
    this.updateshowNodianshi();
  },
  watch: {
    usercollects: {
      deep: true,
      //深度监听监听 usercollects 数组的变化，并在其中更新 hasMovie 和 showNoMovie 的值
      handler() {
        this.updateShowNoMovie();
        this.updateshowNoDongman();
        this.updateshowNodianshi();
      },
    },
  },

  //存储用户个人信息到vuex中
  // 需要调用computed方法  简便引入vuex 中的user
  computed: {
    ...mapState(["user"]),
    pageItem() {
      return function (type) {
        let arr = [];
        if (type == "movie") {
          let start = (this.currentPage - 1) * 5;
          arr = this.moviedata.slice(start, this.currentPage * 5);
        } else if (type == "dongman") {
          let start = (this.currentPage1 - 1) * 5;
          arr = this.dongmandata.slice(start, this.currentPage1 * 5);
          console.log("动漫", start, this.currentPage * 5);
        } else {
          let start = (this.currentPage2 - 1) * 5;
          arr = this.dianshidata.slice(start, this.currentPage2 * 5);
        }
        // console.log('电影总数组:',this.moviedata);
        // console.log('截取的数组:',arr);
        console.log("当前数组:", arr);
        return arr;
      };
    },
  },
  methods: {
    handleScroll() {
      // 判断页面滚动距离是否超过一定阈值，如果超过则显示按钮
      this.showButton = window.pageYOffset > 300;
      console.log("页面滚动距离:", window.pageYOffset);
    },
    scrollToTop() {
      // 滚动到页面顶部
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    },
    pushdata_movie() {
      // 先清空数组
      this.moviedata = [];
      for (let i = 0; i < this.usercollects.length; i++) {
        //遍历数组
        if (this.usercollects[i].type === "movie") {
          this.moviedata.push(this.usercollects[i]);
        }
      }
    },
    pushdata_dongman() {
      // 先清空数组
      this.dongmandata = [];
      for (let i = 0; i < this.usercollects.length; i++) {
        //遍历数组
        if (this.usercollects[i].type === "dongman") {
          this.dongmandata.push(this.usercollects[i]);
        }
      }
    },
    pushdata_dianshi() {
      // 先清空数组
      this.dianshidata = [];
      for (let i = 0; i < this.usercollects.length; i++) {
        //遍历数组
        if (this.usercollects[i].type === "dianshi") {
          this.dianshidata.push(this.usercollects[i]);
        }
      }
    },
    // ...mapMutations(['user']),
    handleSettingsClick() {
      // 处理设置图标点击事件
      //跳转到收藏页面 实际为用户个人信息修改
      this.$router.push("/shoucang");
    },
    handleMessageClick() {
      // 处理消息图标点击事件
      this.$router.push("/shenhe");
      //点击跳转审核详情页
    },
    // 更新 hasMovie 和 showNoMovie 的值
    updateShowNoMovie() {
      if (this.usercollects.length > 0) {
        for (let i = 0; i < this.usercollects.length; i++) {
          //遍历数组
          if (this.usercollects[i].type === "movie") {
            this.hasMovie = true;
            break;
          }
        }
        this.showNoMovie = !this.hasMovie;
        this.showNoLogin = false;
      } else {
        this.hasMovie = false;
        this.showNoMovie = true;
        this.showNoLogin = true;
      }
    },
    // 更新 hasDongman 和 showNoDongman 的值
    updateshowNoDongman() {
      if (this.usercollects.length > 0) {
        for (let i = 0; i < this.usercollects.length; i++) {
          //遍历数组
          if (this.usercollects[i].type === "dongman") {
            this.hasDongman = true;
            break;
          }
        }
        this.showNoDongman = !this.hasDongman;
        this.showNoLogin = false;
      } else {
        this.hasDongman = false;
        this.showNoDongman = true;
        this.showNoLogin = true;
      }
    },
    // 更新 hasdianshi 和 showNodianshi 的值
    updateshowNodianshi() {
      if (this.usercollects.length > 0) {
        for (let i = 0; i < this.usercollects.length; i++) {
          //遍历数组
          if (this.usercollects[i].type === "dongman") {
            this.hasdianshi = true;
            break;
          }
        }
        this.showNodianshi = !this.hasdianshi;
        this.showNoLogin = false;
      } else {
        this.hasdianshi = false;
        this.showNodianshi = true;
        this.showNoLogin = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.personal-info {
  background-image: linear-gradient(226deg, #71d7ed, #e6e983 69%, #f0b094);

  // background-image: linear-gradient(to right, #3bd0d0 0%, #330867 100%) !important;
  .avatar {
    display: block;
    margin: 5px auto;
    width: 80px;
    height: 80px;
    // border-radius: 200%;
  }
  .myuserBtn {
    margin-left: 40%;
    padding: 10px 15px;
    border-radius: 200px;
    margin-bottom: 2px;
    border: transparent;
    background: linear-gradient(to right, #ff2b72, #ffe357);

    // background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%) !important;
    font-size: 12px;
    color: rgb(255, 240, 254) !important;

    // color: #ffffff ;
  }
  .van-tab__pane {
    margin-bottom: 50px;

    .van-grid-item {
      position: relative;
      margin: 20px auto;
      box-shadow: 0 5px 20px #3ec1d3 !important;

      .van-grid-item__content--center {
        padding: 0;

        img {
          width: 260px;
          height: 380px;
        }

        .collMovDetail {
          padding: 5px;
          text-align: center;
          background-color: #f5efef !important;
          width: 100%;
        }
      }
    }
  }
}
.qiehuan {
  background-color: transparent;
  position: absolute;
  z-index: 9;
  right: 0;
  top: 46px;
  transform: translateY(50%);
  color: white;
}
</style>
